<template>
    <div class="g-wrap">
        <header class="header">
            <img class="logo" src="./assets/images/logo.png" />
            <img class="banner" src="./assets/images/banner.png" alt="">
            <img class="bannerword" src="./assets/images/bannerword.png" alt="">
        </header>
        <div class="g-sectionwrap">
            <ul class="nav" @click="switchNav">
                <li data-type="domestic" :class="{'current':current==='domestic'}">国内疫情</li>
                <li data-type="abroad" :class="{'current':current==='abroad'}">国外疫情</li>
            </ul>
            <router-view />
        </div>
    </div>
</template>
<script>
export default {
     props: ['data'],
    data () {
        return {
            current: this.$route.name
        };
    },
    methods: {
        switchNav (e) {
            const _t = e.target;
            this.current = _t.dataset.type;
            this.$router.push({
                path: this.current
            }).catch(err => err); // catch是解决router的兼容性问题，请保留
        }
    }
};
</script>
<style>
    /* .g-wrap { } */
    .header { width: 100%; height: 250px;padding-top: 1px;background: linear-gradient(180deg, rgba(34, 114, 220, 1) 0%, rgba(15, 62, 183, 1) 100%);}
    .header img { display: block;}
    .header img.logo { width: 64%; margin: 6px 5px 0;}
    .header img.banner { width: 100%; }
    .header img.bannerword {position: absolute; top: 55px;left: 12px;display: block;width: 72%; }
    .g-sectionwrap {position: relative; top: -100px;background-color: #FFF;margin: 0 10px;}
    .g-sectionwrap .nav { display: flex; justify-content: center; align-items: center;}
    .g-sectionwrap .nav li { display: flex; justify-content: center; align-items: center;
        width: 50%; height: 45px; font-size: 14px; background-color: #2e5ebc; color: #FFF;}
    .g-sectionwrap .nav li.current {background-color: #FFF; color: #2e5ebc;}
</style>
